<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <style type="text/css">
        #big{
            width: 500px;
            height: 300px;
            border: 1px solid gray;
        }
        #small{
            width: 200px;
            height: 100px;
            border: 2px solid gray;
            background-color: aqua;
            margin: 0 auto;;
            margin-top: 100px;
        }
        .one{
            -webkit-transform: scale(0.5,0.5);
            -moz-transform:scale(0.5,0.5);
            -ms-transform: scale(0.5,0.5);
            -o-transform: scale(0.5,0.5);
            transform:  scale(0.5,0.5);
        }
        .two{
            -webkit-transform: scale(1,1);
            -moz-transform: scale(1,1);
            -ms-transform: scale(1,1);
            -o-transform: scale(1,1);
            transform:   scale(1,1);
        }
        .three{
            -webkit-transform: scale(1.5,1.5);
            -moz-transform: scale(1.5,1.5);
            -ms-transform: scale(1.5,1.5);
            -o-transform:scale(1.5,1.5);
            transform:  scale(1.5,1.5);
        }
        .four{
            -webkit-transform: scale(2,2);
            -moz-transform:scale(2,2);
            -ms-transform:scale(2,2);
            -o-transform: scale(2,2);
            transform: scale(2,2);
        }
        .five{
            -webkit-transform: scale(2.5,2.5);
            -moz-transform:  scale(2.5,2.5);
            -ms-transform:  scale(2.5,2.5);
            -o-transform:  scale(2.5,2.5);
            transform:   scale(2.5,2.5);
        }
        .six{
            -webkit-transform: scaleX(2);
            -moz-transform: scaleX(2);
            -ms-transform: scaleX(2);
            -o-transform: scaleX(2);
            transform: scaleX(2);
        }
        .seven{
            -webkit-transform: scaleY(2);
            -moz-transform: scaleY(2);
            -ms-transform: scaleY(2);
            -o-transform: scaleY(2);
            transform: scaleY(2);
        }
        </style>
</head>
<body>
    <form action="#" method="post" >
        <input type="radio" value="scale(0.5,0.5)" name="translate" id="one"/>
        <label for="one">scale(0.5,0.5)</label><br/>
        <input type="radio" value="scale(1,1)" name="translate" id="two"/>
        <label for="two">scale(1,1)</label><br/>
        <input type="radio" value="scale(1.5,1.5)" name="translate" id="three"/>
        <label for="three">scale(1.5,1.5)</label><br/>
        <input type="radio" value="scale(2.0.2.0)" name="translate" id="four"/>
        <label for="four">scale(2.0.2.0)</label><br/>
        <input type="radio" value="scale(2.5,2.5)" name="translate" id="five"/>
        <label for="five">scale(2.5,2.5)</label><br/>
        <input type="radio" value="scaleX(2)" name="translate" id="six"/>
        <label for="five">scaleX(2)</label><br/>
        <input type="radio" value="scaleY(2)" name="translate" id="seven"/>
        <label for="five">scaleY(2)</label><br/>
    </form>
    <div id="big">
        <div id="small">

        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("input").click(function () {
                $("#small").removeClass();
                var inp=$(this).attr("id");
                $("#small").addClass(inp);
            });
        });

    </script>
</body>
</html>